<template>
	<view class="container">
		<!-- 轮播图 -->
		<view class="topBanner">
			<swiper style="height: 580rpx;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in banner" :key="item" @click="toMessage(item)">
					<image class="swiper-item" :src="item.publicize_img" />
				</swiper-item>
			</swiper>
		</view>

		<!-- 输入框 -->
		<view class="positionInput" @click="searchBack">
			<view class="input">
				<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入搜索关键词" clearButton="none"
					cancelButton="none" @confirm="search" />
				<!-- <uni-icons type="search" size="30" color="#D4D5D5"></uni-icons> -->
			</view>
			<uni-icons type="headphones" size="30" color="#000"></uni-icons>
		</view>

		<!-- nav导航 -->
		<view class="nav">
			<view style="display: flex;flex-direction: column;align-items: center;" @click="towuLian">
				<view class="navList" style="width: 100rpx;height: 100rpx;"
					:style="{backgroundImage:`url('/static/wuLian.png')`}">
				</view>
				<text style="font-size: 24rpx;">物联</text>
			</view>
			<view style="display: flex;flex-direction: column;align-items: center;" v-for="navitem in FenLeiList"
				:key="navitem">
				<view class="navList" style="width: 100rpx;height: 100rpx;"
					:style="{backgroundImage:`url(${navitem.img})`}">

				</view>
				<text style="font-size: 24rpx;">{{navitem.type}}</text>
			</view>
		</view>

		<view style="margin: 20rpx;font-size: 32rpx; font-weight: 600;">新闻中心</view>
		<!-- 新闻轮播图 -->
		<view class="bottomBanner">
			<swiper style="height: 406rpx;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in xinBanner" :key="item" @click="toMessage(item)">
					<image class="iamge" :src=item.publicize_img />
				</swiper-item>
			</swiper>
		</view>
		<template v-for="item in danYuanLieBiao">
			<view style="margin: 20rpx;font-size: 32rpx; font-weight: 600;">{{item.type}}</view>
			<!-- 单元名称 -->
			<view class="List">
				<view class="listitem" @click="toDetail(item.one.goods_id)">
					<image style="width: 240rpx;height: 282rpx;" :src="item.one.publicize_img" mode=""></image>
				</view>
				<view class="SonList">
					<view v-if="item.children?.length>0" class="list" v-for="sonItem in item.children" :key="sonItem"
						@click="toDetail(sonItem.goods_id)">
						<image style="width: 100%;height: 100%;" :src="sonItem.publicize_img" mode=""></image>

					</view>
				</view>

			</view>

		</template>
		<view style="height: 30rpx;"></view>
	</view>
	<!-- https://mp.weixin.qq.com/s/c7WbDF59QK1zDplcKZ8h2A -->
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		getTypeList,
		getMkList,
		getAdList
	} from "../../api/index.js"
	import {
		getUser
	} from "../../utils/token.js"
	const user = getUser()

	function toMessage(item) {
		console.log(item,911)
		if(item.goods_id){
			toDetail(item.goods_id)
		}else{
			uni.navigateTo({
				url:"/index/pages/detail?url="+item.url
			})
		}
		
	}

	function getIndexList() {
		getTypeList().then(e => {
			// console.log(e, 91)
			FenLeiList.value = e.data
		})

		getMkList().then(e => {
			// 0 代表头部banner
			banner.value = e.data[0].children
			xinBanner.value = e.data[1].children
			// console.log(xinBanner.value,101)

		})
		getAdList().then(e => {
			danYuanLieBiao.value = e.data
		})
	}
	onShow(() => {
		if (!user?.id) {
			uni.navigateTo({
				url: "/wuLian/pages/login"
			})
		}
		getIndexList()
	})

	const toDetail = (id) => {
		uni.navigateTo({
			url: "/chanPin/pages/chanPinXiangQing?id=" + id
			// /url:"/pages/chanPin/chanPinXiangQing"
		})
	}
	// 单元列表
	const danYuanLieBiao = ref([])
	// 分类列表
	const FenLeiList = ref([])
	const towuLian = () => {
		uni.navigateTo({
			url: "/wuLian/pages/index"
		})
	}

	// 顶部轮播图
	const banner = ref([])
	// 新闻中心
	const xinBanner = ref([])
	const searchBack = () => {
		uni.navigateTo({
			url: "/index/pages/search/index"
		})
	}
</script>

<style scoped>
	.topBanner {
		height: 580rpx;
	}

	.iamge {
		width: 720rpx;
		height: 406rpx;
	}

	.bottomBanner {
		height: 406rpx;
		width: 700rpx;
		margin-left: 25rpx;
	}

	.swiper-item {
		width: 100%;
		height: 580rpx;
		background-repeat: no-repeat;
		background-size: inherit;
		background-position: center;
	}

	.positionInput {
		width: 700rpx;
		height: 108rpx;
		background-color: #FFFFFF;
		/* margin: 0 auto; */
		z-index: 99;
		position: absolute;
		top: 520rpx;
		left: 25rpx;
		display: flex;
		align-items: center;
		border-radius: 8rpx;
		justify-content: space-around;
	}

	.input {
		width: 600rpx;
		height: 80rpx;
		background-color: #F7F8FA;
		border-radius: 50rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	.input>input {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-style: normal;
		font-size: 26rpx;
		margin-left: 20rpx;
	}


	.nav {
		width: 100%;
		height: 366rpx;

		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		gap: 10rpx;
		margin-top: 40rpx;
	}

	.navList {
		width: 90rpx;
		height: 90rpx;
		background-color: bisque;
		margin: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		border-radius: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
		background-color: #FFFFFF;
	}

	.List {
		height: 460rpx;
		/* background-color: aqua; */
		margin-left: 25rpx;
		margin-bottom: 40rpx;
		width: 100%;
		height: 282rpx;
		padding: 0;
		display: flex;
		overflow-x: auto;
	}

	.listitem {
		width: 250rpx;
		height: 282rpx;
		padding: 0;
		margin-left: 25rpx;
		margin-right: 10rpx;
	}

	/* 	.list {
		width: 290rpx;
		height: 282rpx;
		margin-left: 25rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	} */

	.item {
		/* margin: 20rpx; */
		width: 300rpx;
		height: 138rpx;
		background-color: black;
	}

	.SonList {
		display: grid;
		grid-auto-columns: 282rpx;
		grid-auto-flow: column;
		grid-gap: 10px;
		grid-template-rows: 131rpx 131rpx;
		padding-right: 60rpx;
	}
</style>